<!DOCTYPE HTML>
<html lang="zh-CN">
<head>

    <title th:text="${post.title}"> - 论坛</title>
    <head th:insert="~{import :: head}"></head>
    <script src="/static/js/index.js"></script>
    <script type="module" src="../static/js/wangEditor.js"></script>
    <script>
        const { createEditor, createToolbar } = window.wangEditor;
        const toolbarConfig = {
            excludeKeys: [
                'group-video'
            ]
        };
        const editorConfig = {
            placeholder: '编辑内容...',
            onChange(editor) {
                const commentId = editor.getConfig().commentId;
                const contentEl = document.getElementById(`comment-content-${commentId}`);
                const plainTextEl = document.getElementById(`comment-plainText-${commentId}`);
                //将元素同步到隐藏的text中以便上传，增加非空判断避免导致错误
                if (contentEl) contentEl.value = editor.getHtml();
                if (plainTextEl) plainTextEl.value = editor.getText();
            },
            MENU_CONF:{
                placeholder: '编辑评论内容...',
                uploadImage: {
                    server: '/upload-image',

                    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                    fieldName: 'image',

                    // 单个文件的最大体积限制，默认为 2M
                    maxFileSize: 3 * 1024 * 1024,

                    // 最多可上传几个文件，默认为 100
                    maxNumberOfFiles: 100,

                    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                    allowedFileTypes: ['image/*'],

                    // 将 meta 拼接到 url 参数中，默认 false
                    metaWithUrl: false,

                    // 跨域是否传递 cookie ，默认为 false
                    withCredentials: true,

                    // 超时时间，默认为 10 秒
                    timeout: 10 * 1000,


                    // 单个文件上传成功之后
                    onSuccess(file, res) {
                        console.log(`${file.name} 上传成功`, res);
                        return res.url;
                    },

                    // 单个文件上传失败
                    onError(file, res) {
                        console.log(`${file.name} 上传失败`, res)
                    },
                }
            }
        };
        function showEditComment(commentId) {
            // 隐藏其他可能打开的编辑框
            document.querySelectorAll('.edit-comment-container').forEach(el => {
                el.classList.remove('show');
            });

            const editorContainer = document.getElementById(`edit-comment-${commentId}`);
            editorContainer.classList.add('show');

            // 获取原始内容
            const originalContent = document.getElementById(`comment-content-${commentId}`);
            const originalPlainText = document.getElementById(`comment-plainText-${commentId}`);

            let initialHtml = '<p><br></p>'; // 默认值
            if (originalContent) {
                initialHtml = originalContent.value || initialHtml;
            }
            // 初始化编辑器
            const editor = createEditor({
                selector: `#editor-edit-${commentId}`,
                html: initialHtml,
                config: {
                    ...editorConfig,
                    commentId: commentId  // 传递commentId用于onChange回调
                }
            });

            const toolbar = createToolbar({
                editor,
                selector: `#toolbar-edit-${commentId}`,
                config: {}
            });

            // 保存编辑器实例以便后续使用
            window[`editor_${commentId}`] = editor;
        }
         // 隐藏编辑框
        function hideEditComment(commentId) {
            document.getElementById(`edit-comment-${commentId}`).classList.remove('show');
        }
        // 提交编辑
        function updateComment(commentId) {
            const content = document.getElementById(`comment-content-${commentId}`).value;
            const plainText = document.getElementById(`comment-plainText-${commentId}`).value;

            fetch('/comment/update', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    id: commentId,
                    content: content,
                    plainText: plainText
                })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === "2000") {
                        // 更新页面显示的评论内容
                        document.querySelector(`#content-${commentId}`).innerHTML = content;
                        hideEditComment(commentId);
                    } else {
                        alert('更新失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('更新失败');
                });
        }
    </script>
</head>
<body>
<div class="index-body">
    <div class="fixed-top" th:insert="~{navigation :: nav}"></div>
    <div class="container-fluid">
        <div class="row">
            <!--主模块-->
            <div class="col-lg-9 col-md-12 col-sm-12" >
                <!--正文-->
                <div class="post-body">
                    <h2><span th:text="${post.title}" class="post-title"></span></h2>
                    <span class="text-desc">
                    发布者：<span th:text="${post.user.nickname}"></span>
                    | 发布时间：<span th:text="${#dates.format(post.gmtCreate,'yy.MM.dd hh:mm')}"></span>
                    | 阅读数：<span th:text="${post.viewCount}"></span>
                    </span>
                </div>
                <hr>
                <!--内容-->

                <div class="col-lg-12 col-md-12 col-sm-12 post-body" th:utext="${post.description}"></div>
                <hr>
                <!--标签及点赞-->
                <div>
                    <a th:each="tag:${post.tag.split(',')}">
                        <a th:href="${'/search-tag/'+tag}" class="badge badge-info tag">
                            <svg class="bi bi-tag" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                              <path fill-rule="evenodd" d="M.5 2A1.5 1.5 0 0 1 2 .5h4.586a1.5 1.5 0 0 1 1.06.44l7 7a1.5 1.5 0 0 1 0 2.12l-4.585 4.586a1.5 1.5 0 0 1-2.122 0l-7-7A1.5 1.5 0 0 1 .5 6.586V2zM2 1.5a.5.5 0 0 0-.5.5v4.586a.5.5 0 0 0 .146.353l7 7a.5.5 0 0 0 .708 0l4.585-4.585a.5.5 0 0 0 0-.708l-7-7a.5.5 0 0 0-.353-.146H2z"/>
                              <path fill-rule="evenodd" d="M2.5 4.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm2-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                            </svg>
                            <text th:text="${tag}"></text>
                        </a>
                    </a>
                    <div class="float-right">
                        <a class="href like-btn" th:data-id="${post.id}" th:data-type="1" th:classappend="${post.isLiked} ? 'liked' : ''">
                            <svg class="bi bi-hand-thumbs-up icon" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a9.84 9.84 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733.058.119.103.242.138.363.077.27.113.567.113.856 0 .289-.036.586-.113.856-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.163 3.163 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16v-1c.563 0 .901-.272 1.066-.56a.865.865 0 0 0 .121-.416c0-.12-.035-.165-.04-.17l-.354-.354.353-.354c.202-.201.407-.511.505-.804.104-.312.043-.441-.005-.488l-.353-.354.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315L12.793 9l.353-.354c.353-.352.373-.713.267-1.02-.122-.35-.396-.593-.571-.652-.653-.217-1.447-.224-2.11-.164a8.907 8.907 0 0 0-1.094.171l-.014.003-.003.001a.5.5 0 0 1-.595-.643 8.34 8.34 0 0 0 .145-4.726c-.03-.111-.128-.215-.288-.255l-.262-.065c-.306-.077-.642.156-.667.518-.075 1.082-.239 2.15-.482 2.85-.174.502-.603 1.268-1.238 1.977-.637.712-1.519 1.41-2.614 1.708-.394.108-.62.396-.62.65v4.002c0 .26.22.515.553.55 1.293.137 1.936.53 2.491.868l.04.025c.27.164.495.296.776.393.277.095.63.163 1.14.163h3.5v1H8c-.605 0-1.07-.081-1.466-.218a4.82 4.82 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z"/>
                            </svg>
                            <text class="like-count" th:text="${post.likeCount}"></text>
                        </a>
                    </div>
                </div>

                <hr>
                <!--编辑-->
                <div th:if="${session.user != null && session.user.id == post.creator}">
                    <a th:href="@{'/publish/'+${post.id}}" class="post-menu" ><svg class="bi bi-pen" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z"/>
                        <path fill-rule="evenodd" d="M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z"/>
                        <path d="M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z"/></svg>编辑</a>
                    <a class="post-menu" th:onclick="'deletePost(\''+${post.id}+'\')'">
                        <input type="hidden" id="creator" th:value="${post.creator}">
                        <input type="hidden" id="userId" th:value="${session.user.id}">
                        <svg class="bi bi-trash" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                        </svg>删除
                    </a>
                    <hr>

                </div>
                <!--一级回复-->
                <h5><span th:text="${post.commentCount}"></span> 条评论</h5>
                <div class="comment" th:each="comment : ${comments}" th:if="${comment!=null}">
                    <div class="media">
                        <div class="media-left">
                            <a th:href="${'/user/'+comment.user.id}">
                                <img th:src="${comment.user.avatarUrl}" class="face-m rounded" alt="...">
                            </a>
                        </div>
                        <div class="media-body body-margin" th:id="${'comment-body-'+comment.id}">
                            <a th:href="${'/user/'+comment.user.id}" class="media-heading href mt-0" >
                                <span th:text="${comment.user.nickname}"></span>
                            </a>
                            <div th:id="${'content-'+comment.id}" th:utext="${comment.content}"></div>
                            <div class="menu">
                                <a class="href like-btn" th:data-id="${comment.id}" th:data-type="2" th:classappend="${comment.isLiked} ? 'liked' : ''">
                                    <svg class="bi bi-hand-thumbs-up icon" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a9.84 9.84 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733.058.119.103.242.138.363.077.27.113.567.113.856 0 .289-.036.586-.113.856-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.163 3.163 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16v-1c.563 0 .901-.272 1.066-.56a.865.865 0 0 0 .121-.416c0-.12-.035-.165-.04-.17l-.354-.354.353-.354c.202-.201.407-.511.505-.804.104-.312.043-.441-.005-.488l-.353-.354.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315L12.793 9l.353-.354c.353-.352.373-.713.267-1.02-.122-.35-.396-.593-.571-.652-.653-.217-1.447-.224-2.11-.164a8.907 8.907 0 0 0-1.094.171l-.014.003-.003.001a.5.5 0 0 1-.595-.643 8.34 8.34 0 0 0 .145-4.726c-.03-.111-.128-.215-.288-.255l-.262-.065c-.306-.077-.642.156-.667.518-.075 1.082-.239 2.15-.482 2.85-.174.502-.603 1.268-1.238 1.977-.637.712-1.519 1.41-2.614 1.708-.394.108-.62.396-.62.65v4.002c0 .26.22.515.553.55 1.293.137 1.936.53 2.491.868l.04.025c.27.164.495.296.776.393.277.095.63.163 1.14.163h3.5v1H8c-.605 0-1.07-.081-1.466-.218a4.82 4.82 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z"/>
                                    </svg>
                                    <text class="like-count" th:text="${comment.likeCount}"></text>
                                </a>
                                <a class="href" th:data-id="${comment.id}" th:data-collapse="null" onclick="collapseComments(this)">
                                    <svg class="bi bi-chat-square-dots icon" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.5a2 2 0 0 1 1.6.8L8 14.333 9.9 11.8a2 2 0 0 1 1.6-.8H14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                                        <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                                    </svg>
                                    <text th:text="${comment.commentCount}"></text>
                                </a>
                                <a class="post-menu float-md-right"
                                   th:if="${session.user != null && comment.commentator == session.user.id}"
                                   th:onclick="'showEditComment(\''+${comment.id}+'\')'">
                                    <svg class="bi bi-pencil" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
                                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                                    </svg> 编辑
                                </a>
                                <a class="post-menu float-md-right"  th:if="${session.user != null && comment.commentator == session.user.id}" th:onclick="'deleteComment(\''+${comment.id}+'\')'">
                                    <input type="hidden" id="commentator" th:value="${comment.commentator}">
                                    <input type="hidden" id="userId" th:value="${session.user.id}">
                                    <svg class="bi bi-trash" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                    </svg>删除
                                </a>
                                <span class="float-right" th:text="${#dates.format(comment.gmtCreate,'yy.MM.dd')}"></span>
                                <div class="collapse edit-comment-container" th:id="${'edit-comment-'+comment.id}">
                                    <textarea th:name="${'comment-content-'+comment.id}"  style="display:none" th:text="${comment.content}" th:id="${'comment-content-'+comment.id}" rows="10"></textarea>
                                    <textarea th:name="${'comment-plainText-'+comment.id}"  style="display:none" th:text="${comment.plainText}" th:id="${'comment-plainText-'+comment.id}" rows="10"></textarea>
                                    <div id="toolbar-container-edit" th:id="${'toolbar-edit-'+comment.id}"></div>
                                    <div id="editor-container-edit" th:id="${'editor-edit-'+comment.id}"></div>
                                    <button class="btn btn-primary mt-2" th:onclick="'updateComment(\''+${comment.id}+'\')'">保存</button>
                                    <button class="btn btn-secondary mt-2 ml-2" th:onclick="'hideEditComment(\''+${comment.id}+'\')'">取消</button>
                                </div>
                            </div>
                            <!--二级回复-->
                            <div class="collapse comment2" th:id="${'comment-'+comment.id}">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" placeholder="回复..." th:id="${'input-'+comment.id}" aria-label="Recipient's username" aria-describedby="basic-addon2">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-success" type="button" onclick="comment(this)" th:data-id="${comment.id}">回复</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
                <h4>提交评论</h4>
                <div class="media post-body" th:if="${session.user != null}">
                    <div class="media-left">
                        <img th:src="${session.user.getAvatarUrl()}" class="face-m rounded" alt="...">
                    </div>
                    <div class="media-body body-margin">
                        <h6 class=" mt-0" >
                            <span th:text="${session.user.getNickname()}"></span>
                        </h6>
                    </div>
                </div>
                <textarea name="description"  style="display:none" th:text="${description}" id="description" rows="10"></textarea>
                <textarea name="plainText"  style="display:none" th:text="${plainText}" id="plainText" rows="10"></textarea>
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
                <input type="hidden" id="postId" th:value="${post.id}">
                <button type="submit" class="btn btn-outline-success" onclick="post()">评论</button>
            </div>
            <!--副模块-->
            <div class="col-lg-3 col-md-12 col-sm-12" >
                <div class="col-lg-12 col-md-12 col-sm-12" >
                    <h6>发布人</h6>
                    <div class="media">
                        <div class="media-left">
                            <a th:href="${'/user/'+post.user.id}">
                                <img th:src="${post.user.avatarUrl}" class="face-l rounded-circle" alt="...">
                            </a>
                        </div>
                        <div class="media-body body-margin">
                            <a class="href" th:href="${'user/'+post.user.id}">
                                <h4 class=" mt-0" >
                                    <span th:text="${post.user.nickname}"></span>
                                </h4>
                            </a>
                        </div>
                    </div>
                </div>
                <hr>
                <div th:if="${!relatedPosts.isEmpty()}">
                    <h4>相关贴子</h4>
                    <div class="list-group">
                        <a th:each="related : ${relatedPosts}" th:href="@{'/post/'+${related.id}}"  th:text="${related.title}" class="list-group-item list-group-item-action"></a>
                    </div>
                    <hr>
                </div>

                <h4>广告</h4>
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <a href="https://ngabbs.com/read.php?tid=41989465" target="_blank">
                                <img src="/images/nga.jpg" class="d-block w-100" alt="...">
                            </a>
                        </div>
                        <div class="carousel-item">
                            <a href="https://ngabbs.com/read.php?tid=41989465" target="_blank">
                                <img src="/images/nga.jpg" class="d-block w-100" alt="...">
                            </a>
                        </div>
                        <div class="carousel-item">
                            <a href="https://ngabbs.com/read.php?tid=41989465" target="_blank">
                                <img src="/images/nga.jpg" class="d-block w-100" alt="...">
                            </a>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>